<template>
  <div>
    <el-container class="manager-container">
      <!-- this is manager page -->
      <!-- 导航菜单上的湖大logo -->
      <el-main>
        <div class="bg-breadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/student/studenthomepage' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>学生选课中心</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-row class="row-card">
          <el-card shadow class="selectable-card">
            <el-table
              :data="selectTable"
              border
              size="small"
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}">
              <el-table-column
                prop="schoolyear"
                label="学年学期">
              </el-table-column>
              <el-table-column
                prop="selectname"
                label="选课名称">
              </el-table-column>
              <el-table-column
                prop="selecttime"
                label="选课时间">
              </el-table-column>
              <el-table-column
                prop="operate"
                label="操作">
                <template>
                  <el-button type="success" @click="toSelectDetailTable()">进入选课</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectTable: [{
        schoolyear: '2021-2022-1',
        selectname: '212201新生一选',
        selecttime: '2021-10-05 10:00 ~ 2021-10-15 17:00'
      }]
    }
  },
  components: {
  },
  created () {
  },
  methods: {
    toSelectDetailTable () {
      this.$router.push({ path: '/student/selectcoursemainpage' })
    }
  }
}
</script>

<style lang="less" scoped>
.manager-container {
  height: 100vh;
  background-color: #f0f1f7;

  .el-main {
    padding: 0px;

    .row-card {
      margin: 20px;
    }

    .selectable-card {
      width: 1480px;
    }

    .el-breadcrumb {
    height: 35px;
    line-height: 35px;
    margin-left: 2%;
    }
  }
}
</style>
